<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
	<title>Carmen Sandiego</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body class="centered">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-xs-offset-1 left-panel shadow">
				<div class="country-banner">
					<div class="country-name text-center">
						<h1>ARGENTINA</h1>
					</div>
					<img src="images/ciudad_.png">
				</div>
		            <div class="tab-content info">
		                <div class="tab-pane active" id="tab-1">
		                	<h3>Visitando: Embajada</h3>
		                </div>
		                <div class="tab-pane" id="tab-2">
		                	<h3>Visitando: Club</h3>
		                </div>
		                <div class="tab-pane" id="tab-3">
		                	<h3>Visitando: Banco</h3>
		                </div>
		            </div>
		            <ul id="menu" class="nav nav-pills nav-justified">
		                <li class="active"><a href="#tab-1" data-toggle="tab"> <img src="images/flags/ar.png" height="100" width="100"> <br> Embajada </a></li>
		                <li><a href="#tab-2" data-toggle="tab"> <img src="images/club_.png" height="100" width="100"> <br> Club </a></li>
		                <li><a href="#tab-3" data-toggle="tab"> <img src="images/banco_.png" height="100" width="100"> <br> Banco </a></li>
					</ul>
				
			</div>
			<div class="col-xs-4 right-panel shadow">
				<div class="text-center">
					<h3>Expedientes</h3>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5>Villanos</h5>
						<div class="infoVillanos">Villanos</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5>Carmen San Diego</h5>
						<div class="infoVillanos">Se reemplaza por foto del villano (no la tengo)</div>
						<button type="button" class="btn btn-default ">Emitir orden</button>
					</div>
			|	</div>
				<div class="col-xs-12">
					<h5>Señas Particulares</h5>
						<div class="infoExpediente"> Señas </div>
				</div>
				<div class="col-xs-12">
					<h5>Hobbies</h5>
						<div class="infoExpediente"> hobbie </div>
				</div>
				<div class="col-xs-12">
					<div class="text-center">
						<h3>Aeropuerto</h3>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5>Paises</h5>
					</div>
				</div>
				<div class="col-xs-12">
					<div class="col-xs-6">
						<div class= "infoPaises"> Pais</div>
					</div>
					<div class="col-xs-6 col-md-offset-6>">
						<div class="text-center">
							<button type="button" class="btn btn-default btn-block ">Retroceder</button>
							<button type="button" class="btn btn-default btn-block ">Quedarse</button>
							<button type="button" class="btn btn-default btn-block ">Viajar</button>
						</div>
					</div>
				</div>
			</div>
			
			
		</div>
    </div>
</body>

</html>